﻿@model Product
@using KhoaLuan.Resources.Product
<div class=" row">

    <article class="col-md-9">
        <div class="nn-body">



            <div style="margin-bottom:20px;" class="header-block">
                <p style="padding-top: 10px; margin-left: 10px;">@Detail.ChiTietSanPham</p>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <img  style="width: 400px; height: 300px; border: 4px solid #CCC;" src="/images/products/@Model.Image" />
                </div>
                <div class="col-md-6">
                    <ul>
                        <li>Mã Sản Phẩm:&nbsp; @Model.Id</li>
                        <li>Tên Sản Phẩm :&nbsp;@Model.Name</li>
                        <li>Giá:&nbsp;@Html.FormatValue(Model.UnitPrice, "{0:C}")</li>
                        <li>Khuyến Mãi:&nbsp;@Model.UnitBrief</li>
                        <li>Chủng Loại Sản Phẩm :&nbsp;@Model.Category.NameVN</li>
                        <li><p>Giảm giá :@Html.FormatValue(Model.Discount ,"{0:p}")</p></li>
                        <li>Nhà Sản Xuất:@Model.Supplier.Name</li>
                        <li>Số lượng:@Model.Quantity &nbsp; Cái</li>
                        <li>Ngày Sản Xuất:@Html.FormatValue(Model.ProductDate ,"{0:dd-MM-yyyy}")</li>
                    </ul>
                    <div>
                        <div id="fb-root"></div>
                        <script>
                            (function (d, s, id) {
                                var js, fjs = d.getElementsByTagName(s)[0];
                                if (d.getElementById(id)) return;
                                js = d.createElement(s); js.id = id;
                                js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.3";
                                fjs.parentNode.insertBefore(js, fjs);
                            }(document, 'script', 'facebook-jssdk'));</script>

                        <div class="fb-like" data-href="https://www.facebook.com/forshopcheap?ref=hl" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
                    </div>
                </div>
            </div>

            <div class="row" style="margin-bottom:20px;margin-top:20px;">
               
                <ul class="nav nav-tabs" style="margin-left:20px;">
                    <li class="active"><a href="#home" data-toggle="tab">@Detail.ChiTiet <span class="glyphicon glyphicon-star-empty"></span></a></li>
                    <li><a href="#info" data-toggle="tab">@Detail.ThongTinKyThuat <span class="glyphicon glyphicon-plus"></span></a></li>
                    <li><a href="#contact" data-toggle="tab">@Detail.BinhLuan <span class="glyphicon glyphicon-pencil"></span></a></li>
                </ul>

                <div class="tab-content" style="margin-left:20px;">
                    <div class="tab-pane active" id="home">@Model.Description</div>
                    <div class="tab-pane" id="info">Đang Cập Nhật Nội dung</div>
                    <div class="tab-pane" id="contact">Đang cập Nhật nội dung</div>
                </div>
            </div>


            <div class="header-block">
                <p style="padding-top: 10px; margin-left: 10px;">@Detail.HangCungLoai</p>
            </div>
            <div class="row product">
                <div id="Carousel" class="carousel slide">
                    <div class="row product">
                        @foreach (var p in Model.Category.Products)
                        {
                            <div class="pro">
                                <div class="pro-pro">
                                    <a class="pro-img" href="/Product/Detail/@p.Id">
                                        <img class="image" src="~/images/products/@p.Image" />
                                    </a>
                                    <a href="#" class="pro-name">@p.Name</a>
                                    <p class="pro-price">@Html.FormatValue(p.UnitPrice, "{0:C}")</p>
                                    
                                    <a class="add-to-cart" href="/Cart/Add/@p.Id">
                                        <img src="~/images/icons/Add%20to%20basket.png" />
                                    </a>
                                    <div class="icon">
                                        @if (p.Latest)
                                        {
                                            <img src="~/images/new_icon.gif" />
                                        }
                                        else if (p.Special)
                                        {
                                            <img src="~/images/special_icon.gif" />
                                        }
                                        else if (p.Discount > 0)
                                        {
                                            <img src="~/images/promo_icon.gif" />
                                        }
                                    </div>
                                </div>
                            </div>
                        }

                    </div>
                </div>
            </div>


            <div class="header-block">
                <p style="padding-top: 10px; margin-left: 10px;">@Detail.HangCungHang</p>
            </div>
            <div class="row product">
                <div id="Carousel" class="carousel slide">
                    <div class="row product">
                        @foreach (var p in Model.Supplier.Products)
                        {
                            <div class="pro">
                                <div class="pro-pro">
                                    <a class="pro-img" href="/Product/Detail/@p.Id">
                                        <img class="image" src="~/images/products/@p.Image" />
                                    </a>
                                    <a href="#" class="pro-name">@p.Name</a>
                                    <p class="pro-price">@Html.FormatValue(p.UnitPrice, "{0:C}")</p>
                                    
                                    <a class="add-to-cart" href="/Cart/Add/@p.Id">
                                        <img src="~/images/icons/Add%20to%20basket.png" />
                                    </a>
                                    <div class="icon">
                                        @if (p.Latest)
                                        {
                                            <img src="~/images/new_icon.gif" />
                                        }
                                        else if (p.Special)
                                        {
                                            <img src="~/images/special_icon.gif" />
                                        }
                                        else if (p.Discount > 0)
                                        {
                                            <img src="~/images/promo_icon.gif" />
                                        }
                                    </div>
                                </div>
                            </div>
                        }

                    </div>
                </div>
            </div>




            <div class="header-block">
                <p style="padding-top: 10px; margin-left: 10px;">@Detail.HangDaXem</p>
            </div>
            <div class="row product">
                <div id="Carousel" class="carousel slide">
                    <div class="row product">
                        @foreach (var p in ViewBag.Views)
                        {
                            <div class="pro">
                                <div class="pro-pro">
                                    <a class="pro-img" href="/Product/Detail/@p.Id">
                                        <img class="image" src="~/images/products/@p.Image" />
                                    </a>
                                    <a href="#" class="pro-name">@p.Name</a>
                                    <p class="pro-price">@Html.FormatValue(p.UnitPrice, "{0:C}")</p>
                                   
                                    <a class="add-to-cart" href="/Cart/Add/@p.Id">
                                        <img src="~/images/icons/Add%20to%20basket.png" />
                                    </a>
                                    <div class="icon">
                                        @if (p.Latest)
                                        {
                                            <img src="~/images/new_icon.gif" />
                                        }
                                        else if (p.Special)
                                        {
                                            <img src="~/images/special_icon.gif" />
                                        }
                                        else if (p.Discount > 0)
                                        {
                                            <img src="~/images/promo_icon.gif" />
                                        }
                                    </div>
                                </div>
                            </div>
                        }

                    </div>
                </div>
            </div>





        </div>
    </article>

    <aside class="col-md-3">
        <br />
        <!--Cart Info-->
        <div class="panel panel-default nn-cart">
            @Html.Partial("_TimKiemNhanh")
        </div>
        <!--/Cart Info-->
        <!--Chủng loại-->
        <div class="panel panel-default">
            @Html.Action("CategoryMenu", "Product")
        </div>
        <!--/Chủng loại-->
        <!--Nhà cung cấp-->
        <div class="panel panel-default">
            @Html.Action("NhaCungCapMenu", "Product")
        </div>
        <!--/Nhà cung cấp-->
        <!--Hàng đặc biệt-->
        <div class="panel panel-default">
            @Html.Partial("_HangDacBiet")
        </div>
        <!--/Hàng đặc biệt-->
    </aside>
</div>

@section scripts{
    <script src="~/jquery-ui/jquery-ui.min.js"></script>
    <link href="~/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
    <style id="cart-fly"></style>
    <script>
        $(function () {
            $("a.add-to-cart").click(function () {
                var anh = $(this).parents("div.pro").find(".image");
                var css = ".cart-fly {background: url(" + anh.attr("src") + ");background-size:100% 100%;}";
                $("#cart-fly").html(css);

                var options = { to: "#cart-image", className: "cart-fly" }
                anh.effect("bounce", 500);
                anh.effect("transfer", options, 1000);

                href = $(this).attr("href");
                $.ajax({
                    url: href,
                    data: {},
                    success: function (response) {
                        $("#cart-count").html(response.Count + " măt hàng");
                        $("#cart-amount").html("VND " + response.Amount);
                    }
                });
                return false;// hủy chức năng của liên kết
            });
        });
    </script>
}